<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新手入门指南</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-help-center.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">新手入门指南</h1>
                <button onclick="viewProgress()" class="text-white hover:opacity-80">
                    <i class="fas fa-chart-pie text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Progress Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="flex items-center text-white">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-graduation-cap text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg">5分钟快速上手</h3>
                        <div class="flex items-center mt-2">
                            <div class="w-32 bg-white/20 rounded-full h-2 mr-3">
                                <div class="bg-green-400 h-2 rounded-full" style="width: 60%"></div>
                            </div>
                            <span class="text-xs opacity-90">进度 60%</span>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="text-xs opacity-80">完成步骤</p>
                        <p class="text-lg font-semibold">3/5</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-24">
            <!-- Quick Start Steps -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    快速开始
                </h3>
                <div class="space-y-3">
                    <!-- Step 1 - Completed -->
                    <div class="step-card bg-white rounded-xl border-2 border-green-200 p-4" data-step="1">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mr-3 mt-1">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-green-800">注册并认证账户</h4>
                                    <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已完成</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">完成企业信息注册和资质认证</p>
                                <div class="bg-green-50 rounded-lg p-3">
                                    <div class="flex items-center text-sm text-green-700">
                                        <i class="fas fa-check-circle mr-2"></i>
                                        <span>恭喜！您的账户已成功认证</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 2 - Completed -->
                    <div class="step-card bg-white rounded-xl border-2 border-green-200 p-4" data-step="2">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mr-3 mt-1">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-green-800">完善店铺信息</h4>
                                    <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已完成</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">设置店铺基本信息、LOGO和简介</p>
                                <div class="grid grid-cols-2 gap-2 text-xs">
                                    <div class="flex items-center text-green-600">
                                        <i class="fas fa-check mr-1"></i>
                                        <span>店铺名称</span>
                                    </div>
                                    <div class="flex items-center text-green-600">
                                        <i class="fas fa-check mr-1"></i>
                                        <span>LOGO上传</span>
                                    </div>
                                    <div class="flex items-center text-green-600">
                                        <i class="fas fa-check mr-1"></i>
                                        <span>店铺简介</span>
                                    </div>
                                    <div class="flex items-center text-green-600">
                                        <i class="fas fa-check mr-1"></i>
                                        <span>联系方式</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 3 - Completed -->
                    <div class="step-card bg-white rounded-xl border-2 border-green-200 p-4" data-step="3">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mr-3 mt-1">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-green-800">配置支付方式</h4>
                                    <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已完成</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">设置收款账户和支付方式</p>
                                <div class="flex items-center space-x-4 text-xs">
                                    <div class="flex items-center text-green-600">
                                        <i class="fab fa-weixin mr-1"></i>
                                        <span>微信支付</span>
                                    </div>
                                    <div class="flex items-center text-green-600">
                                        <i class="fab fa-alipay mr-1"></i>
                                        <span>支付宝</span>
                                    </div>
                                    <div class="flex items-center text-green-600">
                                        <i class="fas fa-university mr-1"></i>
                                        <span>银行转账</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 4 - In Progress -->
                    <div class="step-card bg-white rounded-xl border-2 border-blue-200 p-4" data-step="4">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 mt-1 animate-pulse">
                                <span class="text-sm font-bold">4</span>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-blue-800">上传首个商品</h4>
                                    <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">进行中</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">发布您的第一个商品开始销售</p>
                                <div class="bg-blue-50 rounded-lg p-3 mb-3">
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-blue-800">商品发布进度</span>
                                        <span class="text-sm text-blue-600">70%</span>
                                    </div>
                                    <div class="w-full bg-blue-200 rounded-full h-2 mt-2">
                                        <div class="bg-blue-500 h-2 rounded-full" style="width: 70%"></div>
                                    </div>
                                </div>
                                <button onclick="continueProduct()" class="w-full bg-blue-50 text-blue-600 text-sm py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    继续完成商品发布
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Step 5 - Pending -->
                    <div class="step-card bg-white rounded-xl border border-gray-200 p-4" data-step="5">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-gray-300 text-white rounded-full flex items-center justify-center mr-3 mt-1">
                                <span class="text-sm font-bold">5</span>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-gray-700">设置物流配送</h4>
                                    <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">待完成</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">配置物流合作商和运费模板</p>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <div class="text-xs text-gray-600">
                                        完成前一步骤后即可解锁此功能
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Essential Tools -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    必备工具
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <button onclick="openTool('dashboard')" class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 text-center border border-purple-200 hover:border-purple-400 transition-all">
                        <i class="fas fa-chart-bar text-2xl text-purple-600 mb-2"></i>
                        <p class="text-sm font-medium">数据中心</p>
                        <p class="text-xs text-gray-600 mt-1">查看销售数据</p>
                    </button>
                    <button onclick="openTool('products')" class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-4 text-center border border-green-200 hover:border-green-400 transition-all">
                        <i class="fas fa-box text-2xl text-green-600 mb-2"></i>
                        <p class="text-sm font-medium">商品管理</p>
                        <p class="text-xs text-gray-600 mt-1">管理商品库存</p>
                    </button>
                    <button onclick="openTool('orders')" class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-4 text-center border border-orange-200 hover:border-orange-400 transition-all">
                        <i class="fas fa-shopping-cart text-2xl text-orange-600 mb-2"></i>
                        <p class="text-sm font-medium">订单管理</p>
                        <p class="text-xs text-gray-600 mt-1">处理订单流程</p>
                    </button>
                    <button onclick="openTool('finance')" class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 text-center border border-blue-200 hover:border-blue-400 transition-all">
                        <i class="fas fa-dollar-sign text-2xl text-blue-600 mb-2"></i>
                        <p class="text-sm font-medium">财务管理</p>
                        <p class="text-xs text-gray-600 mt-1">查看收入报表</p>
                    </button>
                </div>
            </div>

            <!-- Tips and Tricks -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    新手贴士
                </h3>
                <div class="space-y-3">
                    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
                        <div class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-600 text-xl mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-medium text-yellow-800 mb-1">商品图片很重要</h4>
                                <p class="text-sm text-yellow-700">高质量的商品图片可以提高转化率30%以上，建议使用专业拍摄设备</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-green-50 border border-green-200 rounded-xl p-4">
                        <div class="flex items-start">
                            <i class="fas fa-chart-line text-green-600 text-xl mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-medium text-green-800 mb-1">关注数据表现</h4>
                                <p class="text-sm text-green-700">每天查看销售数据，了解热门商品和客户偏好，及时调整策略</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                        <div class="flex items-start">
                            <i class="fas fa-users text-blue-600 text-xl mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-medium text-blue-800 mb-1">优质客户服务</h4>
                                <p class="text-sm text-blue-700">快速响应客户咨询，处理售后问题，维护良好的店铺评价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Learning Resources -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    学习资源
                </h3>
                <div class="space-y-3">
                    <div class="bg-white rounded-xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-play-circle text-red-600 text-2xl mr-3"></i>
                                <div>
                                    <p class="font-medium text-sm">新手训练营视频</p>
                                    <p class="text-xs text-gray-500">7集完整教程 • 共2小时</p>
                                </div>
                            </div>
                            <button onclick="watchTraining()" class="bg-red-50 text-red-600 text-xs px-3 py-1.5 rounded-lg hover:bg-red-100 transition-colors">
                                观看
                            </button>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-file-pdf text-orange-600 text-2xl mr-3"></i>
                                <div>
                                    <p class="font-medium text-sm">商家运营手册</p>
                                    <p class="text-xs text-gray-500">PDF格式 • 32页详细指南</p>
                                </div>
                            </div>
                            <button onclick="downloadManual()" class="bg-orange-50 text-orange-600 text-xs px-3 py-1.5 rounded-lg hover:bg-orange-100 transition-colors">
                                下载
                            </button>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-comments text-blue-600 text-2xl mr-3"></i>
                                <div>
                                    <p class="font-medium text-sm">新手交流群</p>
                                    <p class="text-xs text-gray-500">1对1专属客服指导</p>
                                </div>
                            </div>
                            <button onclick="joinGroup()" class="bg-blue-50 text-blue-600 text-xs px-3 py-1.5 rounded-lg hover:bg-blue-100 transition-colors">
                                加入
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Success Stories -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    成功案例
                </h3>
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-4 border border-green-200">
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-trophy text-green-600 text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium text-green-800 mb-2">张老板的数码店</h4>
                            <p class="text-sm text-green-700 mb-2">入驻第一个月就实现月销售额50万，成功秘诀：</p>
                            <ul class="text-xs text-green-600 space-y-1">
                                <li>• 专业的商品图片拍摄</li>
                                <li>• 及时响应客户咨询</li>
                                <li>• 合理的价格策略</li>
                                <li>• 积极参与平台活动</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-20 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="continueGuide()" class="flex-1 bg-blue-600 text-white font-medium py-2.5 rounded-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-arrow-right mr-2"></i>继续指南
                </button>
                <button onclick="getHelp()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-question-circle"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // View progress
        function viewProgress() {
            window.location.href = 'b2b-onboarding-progress.html';
        }

        // Continue product setup
        function continueProduct() {
            if (confirm('继续完成商品发布？\n\n系统会跳转到商品发布页面')) {
                window.location.href = 'b2b-create-product.html?continue=true';
            }
        }

        // Open tools
        function openTool(tool) {
            const tools = {
                'dashboard': 'b2b-dashboard.html',
                'products': 'b2b-product-management.html',
                'orders': 'b2b-order-management.html',
                'finance': 'b2b-financial-center.html'
            };
            
            if (tools[tool]) {
                window.location.href = tools[tool];
            }
        }

        // Watch training
        function watchTraining() {
            window.location.href = 'b2b-video-tutorials.html?series=beginner-camp';
        }

        // Download manual
        function downloadManual() {
            showToast('正在下载商家运营手册...');
            setTimeout(() => {
                showToast('下载完成！');
            }, 2000);
        }

        // Join group
        function joinGroup() {
            if (confirm('加入新手交流群？\n\n将为您分配专属客服')) {
                showToast('正在为您安排专属客服...');
                setTimeout(() => {
                    showToast('专属客服将在5分钟内联系您');
                }, 2000);
            }
        }

        // Continue guide
        function continueGuide() {
            const currentStep = 4; // Based on progress shown
            if (currentStep === 4) {
                continueProduct();
            } else {
                showToast('正在加载下一步骤...');
            }
        }

        // Get help
        function getHelp() {
            window.location.href = 'b2b-customer-service.html';
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('新手入门指南已加载');
        });
    </script>
</body>
</html>